<template>
	<view>
		<map id="map" :longitude="longitude" :latitude="latitude" scale="14" style="width: 100%; height: 100vh"
			:markers="markers" @tap="onMapTap" @anchorpointtap="addAnchorpointtap" @poitap="addPoitap"
			@callouttap="addCallouttap" @regionchange="addRegionchange" @controltap="addControltap">
		</map>
		<view class="chaxunBox">
			<view class="chaxunInput">
				地点查询 :
				<view class="intupBox">
					<input type="text" @change="OnInputchange" />
				</view>
			</view>
			<button @click="addQiehuan">23D切换</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	onLoad(() => {
		qqmapsdk = new QQMapWx({
			key: key.value
		})
	})

	onShow(() => {})
	// 点击控件时触发，e.detail = {controlId}
	const addControltap = (e) => {
		console.log(e, '点击控件时触发');
	}
	// 视野发生变化时触发
	const addRegionchange = (e) => {
		console.log(e, '视野发生变化时触发');
	}
	// 点击标记点对应的气泡时触发，e.detail = {markerId}
	const addCallouttap = (e) => {
		console.log(e, '点击标记点对应的气泡时触发');
	}
	// 点击地图poi点时触发，e.detail = {name, longitude, latitude}
	const addPoitap = (e) => {
		console.log(e, '点击地图poi点时触发');
	}
	// 点击定位标时触发，e.detail = {longitude, latitude}
	const addAnchorpointtap = (e) => {
		console.log(e, '点击定位标时触发');
	}
	// 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度
	const onMapTap = (e) => {
		console.log(e, '点击地图时触发');
		// console.log(e.detail.longitude);
		addMarker(e.detail.latitude, e.detail.longitude, e.timeStamp)
	}
	// 使用 require 导入
	const QQMapWx = require('../../static/qqmap-wx-jssdk.js');
	// 标记点数组
	const markers = ref([])
	let qqmapsdk = null

	const longitude = ref(116.397389)
	const latitude = ref(39.908823)

	const key = ref('V7QBZ-AEM3W-UVCRU-YBOQF-WKZBQ-CYFTS')

	// 添加标记点（打点）
	const addMarker = (lat, lon, id) => {
		// 可以设置多次打点，临时示例只添加一个
		markers.value.push({
			id: id,
			longitude: lon,
			latitude: lat,
			name: '当前位置',
			// 自定义图标
			// iconPath: "/static/marker.png", // 可以自定义图标路径
			width: 30,
			height: 30
		})
	}
	// 添加搜索打点
	const OnInputMarker = (e) => {
		// 可以设置多次打点，临时示例只添加一个
		e.forEach(item => {
			console.log(item);
			markers.value.push({
				id: Number(item.id),
				longitude: item.location.lng,
				latitude: item.location.lat,
				name: '当前位置',
				// 自定义图标
				iconPath: "/static/images/logo.png", // 可以自定义图标路径
				width: 30,
				height: 30,
				title: '123123123123',
				callout: {
					content: item.title,
					display: 'ALWAYS',
					style: {
						backgroundColor: "#fff",
						borderRadius: "8px",
						padding: "10px",
						fontSize: "14px",
						color: "#000",
						whiteSpace: "normal" // 允许换行
					},
					customCallout: true
				},
				// label:{
				// 	content:'111111'
				// }
			})
		})

	}
	// 地点查询
	const OnInputchange = (e) => {
		// console.log(e.detail.value, 'eeeee');
		// console.log(qqmapsdk);
		qqmapsdk.search({
			keyword: e.detail.value,
			success: function(res) {
				console.log(res, 1)
				OnInputMarker(res.data)
			},
			fail: function(res) {
				console.log(res, 2)
			},
			complete: function(res) {
				console.log(res, 3)
			}
		})
	}
	// 2d3d切换
	// const addQiehuan = ()=>{
	// 	qqmapsdk.setViewMode('3D')
	// }
</script>

<style lang="less" scoped>
	.chaxunBox {
		width: 70%;
		height: 30vh;
		background-color: pink;
		position: absolute;
		left: 0;
		bottom: 0;
		overflow-y: scroll;

		.chaxunInput {
			display: flex;
		}

		.intupBox {
			background-color: #fff;
		}
	}
</style>